<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>英雄联盟官方网站</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="./public/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="./public/main/css/personal.css" />
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        a {
            text-decoration: none;
        }

        li {
            list-style-type: none;
        }

        .clearfix:after {
            content: "";
            display: block;
            clear: both;
        }

        .header {
            width: 100%;
            /* height: 90px; */
            background-color: #090909;
        }

        .head_inner {
            width: 1240px;
            height: 90px;
            margin: 0px auto;
        }

        .logo {
            width: 190px;
            height: 100px;
            background-image: url(./public/img/spr-v2.png);
            background-position: 0px -30px;
            margin-top: 5px;
            float: left;
            position: relative;
            z-index: 999;
        }

        .main_nav_wrap {
            float: left;
            /* margin-left: 200px; */
            width: 600px;
            height: 90px;
        }

        .main_nav_wrap ul li {
            width: 120px;
            height: 90px;
            float: left;
        }

        .main_nav_wrap ul li a {
            display: block;
            width: 100%;
            padding-top: 25px;
            font-size: 18px;
            text-align: center;
            color: #fafafa;
        }

        .main_nav_wrap ul li a span {
            display: block;
            font-size: 10px;
            color: #838383;
        }

        .sub_nav {
            visibility: hidden;
            width: 100%;
            height: 230px;
            padding: 20px 0;
            background-color: rgba(0, 0, 0, 0.7);
            position: absolute;
            z-index: 1;
            top: 90px;
            left: 0px;
        }

        .sub_nav_inner {
            width: 1040px;
            height: 100%;
            margin: 0px auto;
            padding-left: 200px;
        }

        .sub_nav_inner ul {
            width: 120px;
            float: left;
            text-align: center;
        }

        .sub_nav_inner ul li {
            height: 28px;
            line-height: 28px;
            color: #e1e1e1;
            font-size: 14px;
        }

        .hot,
        .new {
            display: inline-block;
            width: 14px;
            height: 14px;
            background-image: url(./public/img/spr-v2.png);
            vertical-align: middle;
        }

        .hot {
            background-position: -107px 0px;
        }

        .new {
            background-position: -129px 0px;
        }

        .head_right {
            width: 440px;
            height: 90px;
            float: right;
        }

        .head_right .head_search,
        .head_right .head_phone {
            display: inline-block;
            width: 40px;
            margin-left: 5px;
            height: 90px;
            text-align: center;
        }

        .head_right .head_search i,
        .head_right .head_phone i {
            display: inline-block;
            width: 27px;
            height: 27px;
            margin-top: 25px;
            background-image: url(./public/img/spr-v2.png);
        }

        .head_right .head_search i {
            background-position: -8px 0px;
        }

        .head_right .head_phone i {
            background-position: -45px 0px;
        }

        .head_search_main {
            position: absolute;
            width: 440px;
            height: 90px;
            top: 0px;
            background-color: #0b0b0b;
            z-index: 2;
            display: none;
            opacity: 0;
            transition: all 0.5s;
        }

        .head_search_inner {
            position: absolute;
            width: 440px;
            height: 36px;
            background-color: #fff;
            margin-top: 27px;
        }

        .search_inner_icon {
            float: left;
            width: 30px;
            height: 30px;
            margin: 3px 4px 0px;
            background-image: url(./public/img/spr-v2.png);
            background-position: -662px -136px;
        }

        .input_search_box {
            float: left;
            border: none;
            width: 368px;
            height: 20px;
            margin-top: 8px;
            font-size: 16px;
            color: #545454;
            line-height: 20px;
        }

        .close_inner_icon {
            float: left;
            width: 28px;
            height: 36px;
            margin-right: 5px;
            background-image: url(./public/img/spr-v2.png);
            background-position: -664px -175px;
        }

        .head_search_quick {
            position: absolute;
            width: 420px;
            top: 70px;
            background-color: #fff;
            padding: 15px 10px;
        }

        .head_search_quick h5 {
            color: #a4a4a4;
            font-size: 12px;
            line-height: 30px;
            height: 30px;
            padding-left: 30px;
            display: block;
        }

        .head_search_quick a {
            width: 370px;
            height: 30px;
            padding-left: 50px;
            line-height: 30px;
            color: #696969;
            display: block;
            font-size: 14px;
        }

        .head_user_info {
            display: inline-block;
            width: 340px;
            height: 100%;
            float: right;
        }

        .head_user_info .head_user_side {
            float: left;
            width: 100px;
            height: 90px;
        }

        .head_user_info .head_user_side span {
            display: inline-block;
            width: 74px;
            height: 74px;
            margin-top: 8px;
            margin-left: 13px;
            background-image: url(./public/img/spr-v2.png);
            background-position: 0px -169px;
            position: relative;
            z-index: 1;
        }

        .head_user_side img {
            position: absolute;
            top: 12px;
            margin-left: -70px;
            border-radius: 50%;
        }

        .head_user_main {
            width: 240px;
            height: 50px;
            padding-top: 18px;
            margin-left: 100px;
        }

        .head_user_unlogin {
            width: 100%;
            height: 19px;
            padding: 5px 0px;
            color: #fff;
        }

        .head_user_unlogin em {
            text-decoration: underline;
            color: #dfb257;
            margin: 0px 3px;
            font-style: normal;
        }

        .head_user_tips {
            width: 100%;
            height: 19px;
            padding: 5px 0px;
            color: #999;
            font-size: 12px;
        }

        .head_user_drop {
            display: none;
            position: absolute;
            width: 340px;
            height: 100px;
            margin-left: 100px;
            padding-top: 20px;
            background-color: rgba(27, 27, 27, 0.9);
        }

        .head_user_drop_tips {
            width: 290px;
            height: 38px;
            padding: 10px 30px 30px;
            font-size: 14px;
            color: #868686;
        }

        .head-link_personal {
            background-color: #161413;
            width: 340px;
            height: 36px;
            font-size: 12px;
            text-align: center;
            color: #161413;
        }

        .rgba9 {
            background-color: rgba(27, 27, 27, 0.9);
        }

        .bannerxx {
            width: 100%;
            height: 370px;
            background: url(http://ossweb-img.qq.com/images/lol/v2/banner/pic-back-v14.jpg) no-repeat center 0px;
            transition: all 0.8s ease;
            border-bottom: 2px solid #8c6c2d;
        }

        .bannerxx:after {
            content: '';
            display: block;
            clear: both;
        }

        .bannerxx_connect {
            width: 1240px;
            margin: 0px auto;
            height: 100%;
            position: relative;
        }

        .game_version {
            position: absolute;
            bottom: 30px;
            right: 0px;
            font-size: 14px;
            color: #888787;
        }

        .game_version em {
            font-style: normal;
            margin-right: 10px;
            color: #f5d185;
        }

        .game_version span {
            display: inline-block;
            height: 22px;
            padding: 0px 15px;
            line-height: 22px;
            font-size: 12px;
            color: #f5d185;
            border: 2px solid #f5d185;
            background-color: rgba(0, 0, 0, 0.65);
            text-align: center;
        }

        .content {
            width: 1240px;
            margin: 0 auto;
            padding-top: 40px;
        }

        .footer {
            width: 100%;
            height: 155px;
            padding: 30px 0px;
            background-color: red;
            background: url(http://ossweb-img.qq.com/images/lol/v2/bg-footer.jpg) no-repeat center top;
        }

        .footer_content {
            padding-left: 380px;
            width: 1240px;
            color: #A5A5A5;
            font-size: 11px;
            margin: 0 auto;
        }

        .footer_content ul {
            float: right;
        }

        .footer_content ul li {
            height: 19px;
            line-height: 19px;
        }

        .footer_content ul li:nth-of-type(1),
        .footer_content ul li:nth-of-type(2) {
            color: #568193;
        }

        .footer_content ul li:nth-of-type(3),
        .footer_content ul li:nth-of-type(4) {
            color: #415967;
        }

        .footer_content ul li:nth-of-type(5) span {
            color: #568193;
        }

        .text_info {
            margin-top: 450px;
            margin-bottom: 50px;
        }

        .icon {
            display: inline-block;
            vertical-align: middle;
            background-repeat: no-repeat;
        }

        .house {
            width: 16px;
            height: 14px;
            background: url('./public/img/page.png') -830px -0px;
        }

        .top {
            padding: 30px 0px;
            font-size: 16px;
            margin-top: 370px;
            margin-left: -20px;
            position: absolute;
        }

        .top a {
            text-decoration: none;
            border-bottom: 1px dotted #333333;
            color: #333333;
        }

        .lg {
            width: 8px;
            height: 9px;
            background: url('./public/img/page.png') -830px -17px;
        }

        .equipment {
            float: left;
            position: relative;
        }

        .hero {
            float: left;
            position: relative;
        }

        .hero_img {
            margin: 0 12px 7px 12px;
            height: 66px;
            width: 65px;
        }

        .hero_p {
            font-size: 10px;
        }

        .hero:hover .sbg {
            display: block;
        }

        .hero:hover .hero_p {
            color: #00A383
        }

        .equipment:hover .hero_p {
            color: #00A383
        }

        .spells {
            float: left;
            position: relative;
        }

        .spells_img {
            margin: 0 12px 7px 12px;
            height: 66px;
            width: 65px;
        }

        .spells_ul:after {
            content: '';
            display: block;
            clear: both;
        }

        .spells_ul {
            width: 500px;
            height: 100%;
            float: left;
            padding-top: 30px;
            padding-left: 16px;
            border-right: 1px solid #F0F0F0;
        }

        #tooltip {
            position: absolute;
            width: 440px;
            background: rgba(0, 0, 0, 0.8);
            display: none;
            border-radius: 10px;
        }

        .tooltip_info {
            padding: 20px;
        }

        .tooltip_info .tooltip_img {
            float: left;
            margin-right: 20px;
            height: 66px;
            width: 65px;
        }

        .tooltip_info h4 {
            color: #54ff00;
            line-height: 30px;
            margin: 0;
        }

        .tooltip_info p {
            color: #ca9033;
            line-height: 30px;
            margin: 0;
        }

        .tooltip_property {
            padding: 15px 0;
            line-height: 16px;
            color: #b0ddff;
            font-size: 14px;
        }

        .filling {
            width: 100%;
            padding: 25px 0;
        }

        .sbg {
            display: none;
            position: absolute;
            top: 0;
            left: 12px;
            background: #00A383;
            opacity: 0.8;
            cursor: pointer;
            width: 66px;
            height: 65px;
        }

        .sbg i {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -12px 0 0 -12px;
            font-size: 25px;
            color: white;
        }

        .hero_ul {
            margin-top: 20px;
        }

        .spells_right {
            padding-left: 40px;
            padding-top: 30px;
            float: left;
        }

        .spells_right_top:after {
            content: '';
            display: block;
            clear: both;
        }



        .spells_right_img {
            float: left;
            height: 64px;
            width: 64px;
            margin-right: 20px;
        }

        .spells_right h4 {
            float: left;
            width: 60%;
            font-size: 16px;
            color: #00A383;
            line-height: 30px;
            margin: 0 auto;
            text-align: left;
        }

        .spells_right_content {
            padding: 20px 0;
            line-height: 18px;
            color: #333;
            font-size: 14px;
            width: 500px;
            display: block;
            text-align: left;
        }

        .spells_right_bigimg {
            height: 281px;
            width: 450px;
            float: left;
        }

        .sbg_spells {
            display: none;
            position: absolute;
            top: 0;
            left: 12px;
            cursor: pointer;
            width: 66px;
            height: 66px;
            box-sizing: border-box;
            border: 4.5px solid #00A383;
        }
        /* .spells:hover .sbg_spells{
            display: block;
        } */

        .search_equipment:after {
            content: '';
            display: block;
            clear: both;
        }
        .search_hero:after {
            content: '';
            display: block;
            clear: both;
        }
        /* .hero_ul:after {
            content: '';
            display: block;
            clear: both;
        } */
    </style>
</head>

<body id="body">

    <div class="header">
        <div class="head_inner clearfix">
            <div class="logo"></div>
            <div class="main_nav_wrap">
                <ul class="clearfix" id="nav_ul">
                    <li>
                        <a href="">
                            游戏资料
                            <span>GAME INFO</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            商城/合作
                            <span>STORE</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            用户互动
                            <span>COMMUNITY</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            赛事中心
                            <span>EVENTS</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            自助系统
                            <span>SYSTEM</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="sub_nav" id="sub_nav">
                <div class="sub_nav_inner">
                    <ul>
                        <li>新手指引</li>
                        <li>
                            <i class="hot"></i> 资料库
                        </li>
                        <li>攻略中心</li>
                        <li>模式实验室</li>
                        <li>海克斯战利品库</li>
                        <li>屏保下载</li>
                        <li>
                            <i class="new"></i>宇宙官网
                        </li>
                    </ul>
                    <ul>
                        <li>点券充值</li>
                        <li>道聚城</li>
                        <li>
                            <i class="hot"></i>周边商城
                        </li>
                        <li>LOL桌游</li>
                        <li>LOL信用卡</li>
                        <li>网吧特权</li>
                    </ul>
                    <ul>
                        <li>在线客服</li>
                        <li>视频中心</li>
                        <li>官方论坛</li>
                        <li>官方微信</li>
                        <li>官方微博</li>
                    </ul>
                    <ul>
                        <li>
                            <i class="new"></i>全球总决赛
                        </li>
                        <li>
                            <i class="hot"></i>LPL职业联赛
                        </li>
                        <li>德玛西亚杯</li>
                        <li>城市争霸赛</li>
                        <li>高校联赛</li>
                        <li>LDL发展联赛</li>
                        <li>高校自发赛</li>
                    </ul>
                    <ul>
                        <li>点亮图标</li>
                        <li>
                            <i class="hot"></i>封号查询
                        </li>
                        <li>体验服申请</li>
                        <li>回放系统</li>
                        <li>服务器状态查询</li>
                        <li>裁决之镰</li>
                        <li>
                            <i class="new"></i>峡谷之巅
                        </li>
                    </ul>
                </div>
            </div>
            <div class="head_right clearfix">
                <span class="head_search" id="search">
                    <i></i>
                </span>
                <div class="head_search_main" id="search_main">
                    <div class="head_search_inner">
                        <i class="search_inner_icon"></i>
                        <input type="text" class="input_search_box" placeholder="搜索 lol.qq.com">
                        <i class="close_inner_icon" id="inner_close"></i>
                    </div>
                    <div class="head_search_quick">
                        <h5>快速链接</h5>
                        <a href="">全球总决赛</a>
                        <a href="">新皮肤</a>
                        <a href="">RNG</a>
                        <a href="">季前赛</a>
                        <a href="">奥恩</a>
                    </div>
                </div>

                <span class="head_phone">
                    <i></i>
                </span>
                <div class="head_user_info" id="user_info">
                    <div class="head_user_side">
                        <span></span>
                        <img src="./public/img/default.png" alt="">
                    </div>
                    <div class="head_user_main">
                        <div class="head_user_unlogin">
                            <span>亲爱的召唤师，欢迎
                                <em>登录</em>
                            </span>
                        </div>
                        <div class="head_user_tips">
                            <span>登录后查看自己的战绩、资产、声望值等</span>
                        </div>
                    </div>
                </div>
                <div class="head_user_drop" id="user_drop">
                    <div class="head_user_drop_tips">
                        登录并且绑定大区后才可查看您的具体信息哦~（包括战绩、资产、声望值等）
                    </div>
                    <div class="head-link_personal">
                        进入个人中心
                    </div>
                </div>
            </div>
        </div>
        <div class="bannerxx" id="bannerxx">
            <div class="bannerxx_connect">
                <div class="game_version">
                    当前游戏版本：
                    <em>Ver 7.24</em>
                    <span>版本详情</span>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="top">
            <i class="icon house"></i>
            <a href="#">英雄联盟首页</a>
            <i class="icon lg"></i>
            <a href="#">游戏资料</a>
            <i class="icon lg"></i>
            <a href="#">信息</a>
        </div>
    </div>
    <div class="container text_info" style="border:1px solid #F0F0F0">
        <div class="body_title">
            <div class="row">
                <div class="pagetab">
                    <ul class="pagetab_list" id="pagetab_list">
                        <li id="pagetab1" class="current card">
                            <a href="javascript:void(0); " class="pagetab_list_lnk">英雄</a>
                        </li>
                        <li id="pagetab2" class="card">
                            <a href="javascript:void(0);" class="pagetab_list_lnk">物品</a>
                        </li>
                        <li id="pagetab3" class="card">
                            <a href="javascript:void(0);" class="pagetab_list_lnk">召唤师技能</a>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
        <div class="body_footer">
            <div class="row">
                <div id="pagetab1_view" class="clearbox info-showbox text-center" style="display: block;">
                    
                    <div class="search_hero">
                        <div style="text-align:right;float:right;" class="input-group col-sm-2 search">
                            <input id="hero_input" type="text" class="form-control xinxi_hero_search" style="height:33px;width:300px;padding:0px 5px;" placeholder="请输入您要搜索的英雄名">
                        </div>
                    </div>


                    <ul class="hero_ul">
                        {{foreach $xinxihero as $hero}}
                        <li class="hero" data-big-name="{{$hero[ 'big_name']}}" data-name="{{$hero[ 'name']}}" data-id="{{$hero[ 'id']}}">
                            <img class="hero_img" src={{$hero[ 'img']}} alt={{$hero[ 'big_name']}}>
                            <p class="hero_p" style="width:100%">{{$hero[ 'big_name']}}</p>
                            <span class="sbg">
                                <i class="glyphicon glyphicon-search"></i>
                            </span>
                        </li>
                        {{/foreach}}
                    </ul>

                </div>
                <div id="pagetab2_view" class="clearbox info-showbox text-center" style="display: none;">
                    <div class="search_equipment">
                        <div style="text-align:right;float:right;" class="input-group col-sm-2 search">
                            <input id="equipment_input" type="text" class="form-control" style="height:33px;width:300px;padding:0px 5px;" placeholder="请输入您要搜索的装备名">
                        </div>
                    </div>
                    <ul class="hero_ul">
                        {{foreach $xinxiequipment as $equipment}}
                        <li class="equipment" data-name="{{$equipment[ 'equipment']}}" data-img="{{$equipment[ 'image']}}" data-price="{{$equipment[ 'price']}}"
                            data-property="{{$equipment[ 'property']}}">
                            <img class="hero_img" src={{$equipment[ 'image']}} alt={{$equipment[ 'equipment']}}>
                            <p class="hero_p" style="width:100%">{{$equipment[ 'equipment']}}</p>
                        </li>
                        {{/foreach}}
                    </ul>
                </div>
                <div id="pagetab3_view" class="clearbox info-showbox text-center" style="display: none;">
                    <ul class="spells_ul">
                        {{foreach $xinxispells as $spells}}
                        <li class="spells" data-name="{{$spells[ 'name']}}" data-img="{{$spells[ 'img']}}" data-content="{{$spells[ 'content']}}"
                            data-bigimg="{{$spells[ 'big_img']}}">
                            <img class="spells_img" onclick="" src={{$spells[ 'img']}} alt={{$spells[ 'name']}}>
                            <p class="spells_p" style="width:100%">{{$spells[ 'name']}}</p>
                            <span class="sbg_spells"></span>
                        </li>
                        {{/foreach}}
                    </ul>
                    <div class="spells_right">
                        <div class="spells_right_top">
                            <img class="spells_right_img" src="http://ossweb-img.qq.com/images/lol/img/spell/SummonerBarrier.png" alt="">
                            <h4>屏障</h4>
                        </div>
                        <div class="spells_right_content">为你的英雄套上护盾，吸收115-455（取决于英雄等级）点伤害，持续2秒。</div>
                        <img class="spells_right_bigimg" src="http://ossweb-img.qq.com/images/lol/web201310/summoner/21.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footer_content clearfix">
            <ul>
                <li>腾讯互动娱乐 | 服务条款 | 广告服务 | 腾讯游戏招聘 | 腾讯游戏客服 | 游戏活动 | 游戏地图 | 商务合作 | 腾讯网 | 网站导航</li>
                <li>腾讯公司版权所有</li>
                <li>COPYRIGHT © 1998 - 2017 TENCENT. ALL RIGHTS RESERVED.</li>
                <li>© 2012 Riot Games, Inc. ALL RIGHTS RESERVED.</li>
                <li>文网进字[2011] 004号 & ISBN 978-7-89989-145-2
                    <span>| 新出网证（粤）字010号 | 粤网文【2017】6138-1456号</span>
                </li>
            </ul>
        </div>
    </div>
</body>
<script src="./public/main/js/main.js"></script>
<script src="./public/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="./public/main/js/personal.js" type="text/javascript" charset="utf-8"></script>
<script>
    var xinxi_hero_search = '';
    $(function () {
        var x = 15;
        var y = 10;
        $(".equipment").mouseover(function (e) { //当鼠标指针从元素上移入时 

            var name = this.dataset.name;

            var img = this.dataset.img;

            var price = this.dataset.price;

            var property = this.dataset.property;


            var tooltip =
                '<div id="tooltip"><div class="tooltip_info"><img class="tooltip_img" src="' + img +
                '" alt={{$equipment[ "equipment"]}}><h4>' + name + '</h4><p>价格：<span>' + price +
                '</span></p><div class="tooltip_property">' + property +
                '</div><div class="filling"></div></div></div>';
            $("body").append(tooltip);
            $("#tooltip").css({
                "top": (e.pageY + y) + "px",
                "left": (e.pageX + x) + "px"
            }).show();
        }).mouseout(function () { //当鼠标指针从元素上移开时 
            $("#tooltip").remove();
        }).mousemove(function (e) { //当鼠标指针从元素上移动时 
            var windows = $(window).width();
            var ms = e.pageX + 460;
            if (windows - ms < 0) {
                $("#tooltip").css({
                    "top": (e.pageY + y) + "px",
                    "left": (e.pageX - 460 + x) + "px"
                });
            } else {
                $("#tooltip").css({
                    "top": (e.pageY + y) + "px",
                    "left": (e.pageX + x) + "px"
                });
            }

        });
    });

    $('.spells').on('click', function () {
        var name = this.dataset.name;

        var img = this.dataset.img;

        var content = this.dataset.content;

        var bigimg = this.dataset.bigimg;

        var num = $('.spells').index(this)
        $('.sbg_spells').css({
            "display": "none"
        });
        $('.sbg_spells').eq(num).css({
            "display": "block"
        });
        $('.spells_p').css({
            "color": "#666666"
        });
        $('.spells_p').eq(num).css({
            "color": "#00A383"
        });
        $(".spells_right").empty();
        var spells_right_info = '<div class="spells_right_top"><img class="spells_right_img" src="' + img +
            '" alt=""><h4>' + name + '</h4></div><div class="spells_right_content">' + content +
            '</div><img class="spells_right_bigimg" src="' + bigimg + '" alt="">'
        $(".spells_right").append(spells_right_info);
    });

    $("#hero_input").keyup(function(){
            //获取输入的value值
            var value = $(this).val();
 
            $(".hero").each(function(index,domElement){
                //获取li对象的data-name的值
                var herobigName = domElement.dataset.bigName;
                var heroName = domElement.dataset.name;
                var heroId = domElement.dataset.id;
                //判断value是否在英雄的名称中
                if(herobigName.indexOf(value)==-1 && heroId.indexOf(value)==-1 && heroName.indexOf(value)==-1){
                    $(domElement).css("display","none");
                }else{
                    $(domElement).css("display","block");
                }
            });
     });

     $("#equipment_input").keyup(function(){
            //获取输入的value值
            var value = $(this).val();
 
            $(".equipment").each(function(index,domElement){
                //获取li对象的data-name的值
                var name = domElement.dataset.name;
                //判断value是否在英雄的名称中
                if(name.indexOf(value)==-1){
                    $(domElement).css("display","none");
                }else{
                    $(domElement).css("display","block");
                }
            });
     });

     $(".hero").on('click' , function(){
        var heroId = this.dataset.id;
        window.location.href = "http://localhost/wzry/index.php?g=front&c=herodetails&a=herodetails&hid="+heroId;
     });

</script>

</html>